<template>
	<div class="padding-container preview-wrap" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="title-part">
		</div>
		<div class="data-preview">
	    <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
				<el-form-item :label="getLabel('groupName')">
          <span>{{ baseData.groupName }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('groupDesc')">
          <span>{{ baseData.groupDesc | dataFormat}}</span>
        </el-form-item>
				<el-form-item :label="getLabel('creTime')">
          <span>{{ baseData.creTime | dateFormat}}</span>
        </el-form-item>
      </el-form>
      <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <!-- <el-form-item :label="getLabel('deviceNum')">
          <span>{{ baseData.deviceCount }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('onlineNum')">
          <span>{{ baseData.deviceConnectionCount }}</span>
        </el-form-item> -->
        <!-- <el-form-item :label="getLabel('activeNum')">
          <span>{{ baseData.deviceActivateCount}}</span>
        </el-form-item> -->
        
      </el-form>
		</div>
		<el-tabs type="border-card">
		  <el-tab-pane :label="$root.lang.control.group.detail.deviceList">
				<Device :groupId="id + ''" @reload="getDetail"/>
		  </el-tab-pane>
		  <!-- <el-tab-pane :label="$root.lang.control.group.detail.taskRecord">
				<Task :groupNumber="id" />
		  </el-tab-pane> -->
		</el-tabs>
	</div>
</template>

<script>
import Device from './device/device'
import Task from './task/task'
export default {
	name: 'GroupDetail',
	components:{
		Device, Task
	},
	data() {
		return {
			id: null,
			fullscreenLoading: true,
			baseData: {},
			formLabelWidth: '120px',
		}
	},
	methods: {
		getLabel(name) {
      return this.$root.lang.control.group.detail[name]+'：'
    },
    getDetail() {
      this.fullscreenLoading = true
      this.request({
        url: '/device/group/page',
        method: 'post',
        data: {
          id: this.id
        }
      }).then(response => {
        this.baseData = response.rows[0]
        this.fullscreenLoading = false
      }).catch(error => {
        this.fullscreenLoading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    }
	},
	created() {
		if(this.$root.langType == 'en'){
      this.formLabelWidth = '160px'
    }
    this.id = this.$route.params.id
    this.getDetail()
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align: left;
		.title-part {
			text-align: left;
			padding-bottom:20px;
			font-size:18px;
		}
		.el-button {
			margin-left:40px;
		}
		.form-inline {
			display: inline-block;
			vertical-align: top;
			min-width:300px;
		}
		.el-form-item__label {
			width:130px !important;
		}
	}
</style>